<template>
  <div class="main_container">
    <el-row class="flex-height">
      <el-col :span="6">
        <div class="flex-height flex flex-column">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">专家类型</div>
              <div ref="chartColumn" class="flex-1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">年龄统计</div>
              <div ref="chartColumn1" class="flex-1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">专家活跃度</div>
              <div ref="chartColumn2" class="flex-1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flex-height flex flex-column px-1">
          <div class="flex-2 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item" id="yuyangMap"></div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">问题统计</div>
              <div ref="chartColumn6" class="flex-1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex-height flex flex-column">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">性别统计</div>
              <div ref="chartColumn3" class="flex-1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">专家发布数前5名</div>
              <div ref="chartColumn4" class="flex-1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">职务统计</div>
              <div ref="chartColumn5" class="flex-1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VueAMap, { lazyAMapApiLoaderInstance } from "vue-amap";
import Vue from "vue";
import { provinceAndCityData } from 'element-china-area-data'
export default {
  name: "BigDatapage2",
  data() {
    return {
      data11: [],
      data12: [],
      data13: [],
      data15: [],
      data16: [],
      data17: [],
      data18: [],
      tabIndex: 0,
      currentDate: "",
      currentTime: "",
      selectAreaName: "",
      map: null,
      expertAmountList: []
    };
  },
  mounted() {
    this.selectAreaName = "";
    this.initMap();
    this.getExpertArea()
    // this.initChart()
    this.getStatis11();
    // this.initChart1()
    this.getStatis12();
    // this.initChart2()
    this.getStatis13();
    // this.initChart3()
    this.getStatis16();

    // this.initChart4()
    this.getStatis17();

    // this.initChart5()
    this.getStatis18();

    // this.initChart6()
    this.getStatis15();
  },
  methods: {
    addMaker(list) {
      // 创建一个 Marker 实例：
      // 多个点实例组成的数组
      if (Array.isArray(list) && list.length) {
        var markerList = list.map(item => {
          return new AMap.Marker({
            position: new AMap.LngLat(item.location.split(',')[0], item.location.split(',')[1]),
            title: item.label,
            content: `<div 
            style="color:#fff;
            min-width:30px;
            min-height:30px;
            padding:2px;
            display:flex;
            justify-content:center;
            align-items:center;
            background-color:rgba(53 ,179, 137, 0.7);
            background: linear-gradient(45deg, #00fff7, #00c2ff);
            border-radius:50%;">${item.value}</div>`
            // label:{content:item.label,direction:'bottom'}
          })
        })
        this.map.add(markerList);
      }
    },
    async getExpertArea() {
      const service = "srvjk_expert_cnt_area_select";
      const params = {
        serviceName: service,
        colNames: ["*"],
        condition: [],
        page: {
          pageNo: 1,
          rownumber: 1000,
        },
      };
      const res = await this.$http.post(`/${service}`, params);
      console.log('getExpertArea:::', res, provinceAndCityData);
      if (res && res.data && res.data.state === 'SUCCESS') {
        // const areas = provinceAndCityData.find(item=>item.label==='陕西省')
        const areaMap = [
          {
            "value": "6101",
            "label": "西安市",
            'location': '108.95,34.26'
          },
          {
            "value": "6102",
            "label": "铜川市",
            'location': '108.95,34.90'
          },
          {
            "value": "6103",
            "label": "宝鸡市",
            'location': '107.24,34.36'
          },
          {
            "value": "6104",
            "label": "咸阳市",
            'location': '108.71,34.33'
          },
          {
            "value": "6105",
            "label": "渭南市",
            'location': '109.47,34.52'
          },
          {
            "value": "6106",
            "label": "延安市",
            'location': '109.49,36.65'
          },
          {
            "value": "6107",
            "label": "汉中市",
            'location': '107.02,33.07'
          },
          {
            "value": "6108",
            "label": "榆林市",
            'location': '109.73,38.29'
          },
          {
            "value": "6109",
            "label": "安康市",
            'location': '109.03,32.69'
          },
          {
            "value": "6110",
            "label": "商洛市",
            'location': '109.92,33.87'
          }
        ]
        const list = res.data.data.map(item => {
          const area = areaMap.find(e => item.area_city == e.label)
          const obj = {
            label: item.area_city,
            value: item.area_cnt,
          }
          if (area && area.location) {
            obj.location = area.location
          }
          return obj
        })
        this.expertAmountList = list
        this.addMaker(list)
      }
    },
    getdata(select, pageNo = 1, rownumber = 1000) {
      return {
        serviceName: select,
        colNames: ["*"],
        condition: [],
        relation_condition: {},
        page: {
          pageNo: pageNo,
          rownumber: rownumber,
        },
      };
    },
    getStatis11() {
      let select = "srvjk_expert_cnt_dept_select";
      this.$http
        .post(`/${select}?${select}`, this.getdata(select))
        .then((res) => {
          if (res.data.state == "SUCCESS") {
            this.data11 = res.data.data;
            this.initChart();
          }
        });
    },
    getStatis12() {
      let select = "srvjk_expert_cnt_age_select";
      this.$http
        .post(`/${select}?${select}`, this.getdata(select))
        .then((res) => {
          if (res.data.state == "SUCCESS") {
            this.data12 = res.data.data.map((item) => ({
              name: item.age_str,
              value: item.age_cnt,
            }));
            this.initChart1();
          }
        });
    },
    getStatis13() {
      // this.$http.get('/bigScreen/getStatis13').then(res => {
      //   if (res.data.code == 200) {
      this.data13 = [
        {
          name: "榆林市",
          value: 250,
        },
        {
          name: "渭南市",
          value: 310,
        },
        {
          name: "咸阳市",
          value: 390,
        },
        {
          name: "商洛市",
          value: 320,
        },
        {
          name: "铜川市",
          value: 210,
        },
      ];
      this.initChart2();
      //   }
      // })
    },
    getStatis15() {
      let select = "srvjk_expert_cnt_question_select";
      this.$http
        .post(`/${select}?${select}`, this.getdata(select))
        .then((res) => {
          if (res.data.state == "SUCCESS") {
            this.data15 = res.data.data.map((item) => ({
              name: item.expert_name,
              value: item.cnt,
            }));
            this.initChart6();
          }
        });
    },
    getStatis16() {
      let select = "srvjk_expert_cnt_sex_select";
      this.$http
        .post(`/${select}?${select}`, this.getdata(select))
        .then((res) => {
          if (res.data.state == "SUCCESS") {
            this.data16 = res.data.data;
            this.initChart3();
          }
        });
    },
    getStatis17() {
      let select = "srvjk_expert_cnt_pub5_select";
      this.$http
        .post(`/${select}?${select}`, this.getdata(select, 1, 5))
        .then((res) => {
          if (res.data.state == "SUCCESS") {
            this.data17 = res.data.data.map((item) => ({
              name: item.publisher,
              value: item.pub_cnt,
            }));
            this.initChart4();
          }
        });
    },
    getStatis18() {
      let select = "srvjk_expert_cnt_post_select";
      this.$http
        .post(`/${select}?${select}`, this.getdata(select))
        .then((res) => {
          if (res.data.state == "SUCCESS") {
            this.data18 = res.data.data;
            this.initChart5();
          }
        });
    },
    // 初始化地图
    initMap() {
      Vue.use(VueAMap);
      VueAMap.initAMapApiLoader({
        key: "34be61f600c91e23d76cc28461e602be",
        plugin: [
          "AMap.Autocomplete",
          "AMap.PlaceSearch",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.ToolBar",
          "AMap.MapType",
          "AMap.PolyEditor",
          "AMap.CircleEditor",
          "AMap.DistrictLayer",
          "AMap.Geocoder",
        ],
        // 默认高德 sdk 版本为 1.4.4
        v: "1.4.18",
        protocol: location.protocol === "https:" ? "https" : "http",
      });
      var that = this;
      lazyAMapApiLoaderInstance.load().then(() => {
        that.map = new AMap.Map("yuyangMap", {
          // 设置地图容器id
          mapStyle: "amap://styles/9f448630955630a5f70bc882000b7f68",
          zIndex: 99,
          resizeEnable: true,
        });

        if (that.areaCode === "") {
          that.getGeoJSONData();
        } else {
          // that.getJsonFile()
        }
      });
    },
    // 地图城市区域点击事件
    clickArea(e) {
      const areaName = e.target.getExtData().areaName;
      // if (areaName != this.selectAreaName) {
      this.selectAreaName = areaName;
      this.loading = true;
      this.jsonData = {};
      this.getGeoJSONDataByName(areaName);
      // }
    },
    // 根据名称获取geojson
    getGeoJSONDataByName(name) {
      const that = this;
      this.$http
        .get("/api/bigdata/not/getGeoJsonByName", {
          params: { areaName: name },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          that.areaCode = res.data.areaCode;
          that.jsonData = res.data.geojson;
          that.loadBigData();
        })
        .catch(() => { });
    },
    loadBigData() {
      if (this.map) {
        this.map.clearMap();
      }
      this._drawGeoJson();
    },
    // 获取默认geojson
    getGeoJSONData() {
      const that = this;
      this.$http.get(this.uploadedDataURL).then(({ data: geoJSON }) => {
        // https://wmsj.gdwlcloud.com/admin 参考页面请求地址
        // http://localhost:8002/shanxi.geojson  陕西省数据获取
        that.jsonData = geoJSON;
        that._drawGeoJson();
      });
    },
    // 根据areacode获取geojson
    getJsonFile() {
      const that = this;
      // this.$http152.get('/api/bigdata/not/getGeoJson1/' + that.areaCode).then(({ data: res }) => {
      this.$http
        .get("/api/bigdata/not/getGeoJson1/610000")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          that.jsonData = res.data;
          that._drawGeoJson();
        })
        .catch(() => { });
    },
    // 绘制geojson
    _drawGeoJson() {
      const that = this;
      const strokeColor = "#d0d0d0";
      const fillcolor = "#246de6";
      var geojson = new AMap.GeoJSON({
        geoJSON: that.jsonData,
        getPolygon: function (geojson, lnglats) {
          var area = geojson.properties._parentProperities;
          var polygon = new AMap.Polygon({
            path: lnglats,
            fillOpacity: 0.5,
            strokeColor: strokeColor,
            strokeOpacity: 0.8, // 线透明度
            strokeWeight: 2, // 线宽
            strokeStyle: "dashed",
            fillColor: fillcolor,
          });
          polygon.setExtData({
            geojson,
            areaName: geojson.properties._parentProperities.name,
          });
          polygon.on("click", that.clickArea);
          if (area.centroid) {
            that._drawTextMap(area.name, area.centroid);
          } else {
            that._drawTextMap(area.name, area.center);
          }

          return polygon;
        },
      });
      geojson.setMap(this.map);
      this.map.setFitView();
    },
    // 绘制城市名称
    _drawTextMap(areaName, center) {
      const text = new AMap.Text({
        text: areaName,
        anchor: "center", // 设置文本标记锚点
        zIndex: 200,
        draggable: false,
        cursor: "pointer",
        angle: 0,
        style: {
          background: "#312ddc",
          color: "#fff",
          "font-size": "10px",
          "line-height": "1.4",
          border: "0",
        },
        position: [parseFloat(center[0]), parseFloat(center[1])],
      });
      text.setMap(this.map);
      if (areaName === "耀州区") {
        const text = new AMap.Text({
          text: "铜川新区",
          anchor: "center", // 设置文本标记锚点
          zIndex: 200,
          draggable: false,
          cursor: "pointer",
          angle: 0,
          style: {
            background: "#312ddc",
            color: "#fff",
            "font-size": "10px",
            "line-height": "1.4",
            border: "0",
          },
          position: [parseFloat(center[0]), parseFloat(center[1]) - 0.08],
        });
        text.setMap(this.map);
      }
    },
    initChart() {
      this.chartColumn = this.$echarts.init(this.$refs.chartColumn);
      // var data = [{ name: '省级专家', value: 13211 }, { name: '市级专家', value: 42111 }, { name: '区级专家', value: 81711 }, { name: '未填写', value: 121711 } ]
      var data = this.data11;
      let mes = [];
      var sumValue = data[0]["cnt"];
      data.forEach((item) => {
        let obj = {
          name: item.department,
          value: item.department_cnt,
        };
        mes.push(obj);
      });
      this.data11 = mes.slice(0, 5);
      data = mes.slice(0, 5);
      var arrName = getArrayValue(data, "name");
      var arrValue = getArrayValue(data, "value");
      var objData = array2obj(data, "name");
      var optionData = getData(data);
      function getArrayValue(array, key) {
        var key = key || "value";
        var res = [];
        if (array) {
          array.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      }

      function array2obj(array, key) {
        var resObj = {};
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i];
        }
        return resObj;
      }

      function getData(data) {
        var res = {
          series: [],
          yAxis: [],
        };
        for (let i = 0; i < data.length; i++) {
          res.series.push({
            name: "专家类型",
            type: "pie",
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
            center: ["30%", "55%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: data[i].value,
                name: data[i].name,
              },
              {
                value: sumValue - data[i].value,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.series.push({
            name: "",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
            center: ["30%", "55%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: 7.5,
                itemStyle: {
                  color: "#E3F0FF",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
              {
                value: 2.5,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(0) + "%");
        }
        return res;
      }

      const option = {
        backgroundColor: "transparent",
        legend: {
          show: true,
          top: "center",
          left: "70%",
          data: arrName,
          itemWidth: 30,
          itemHeight: 20,
          width: 50,
          padding: [0, 5],
          itemGap: 5,
          formatter: function (name) {
            return (
              "{title|" + name + "}\n{value|" + objData[name].value + "人}"
            );
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 9,
                lineHeight: 8,
                color: "#fff",
              },
              value: {
                fontSize: 12,
                lineHeight: 16,
                color: "#fff",
              },
            },
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a}<br>{b}:{c}({d}%)",
        },
        color: ["#FF8700", "#ffc300", "#00e473", "#009DFF"],
        grid: {
          top: "20%",
          bottom: "48%",
          left: "30%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      };
      this.chartColumn.setOption(option);
    },
    initChart1() {
      this.chartColumn1 = this.$echarts.init(this.$refs.chartColumn1);
      // var xdata = ['0-29岁', '0-29岁', '30-39岁', '40-49岁', '50-59岁']
      var xdata = this.data12.map((item) => item.name);
      // var data = [70, 60, 80, 100, 55, 99]
      var data = this.data12.map((item) => item.value);
      var maxArr = [100, 100, 100, 100, 100];
      const option = {
        backgroundColor: "rgba(5,39,58,0)", // 背景色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          // borderRadius: 5,
          // borderColor: "#6baab2",
          // borderWidth: 1,
          formatter: function (params) {
            // params[0].data.nameCode
            const dot =
              '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
            return params[0].name + "<br>" + "杆塔数量 ：" + params[0].value;
          },
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "8%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          data: xdata,
          triggerEvent: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
              padding: [14, 0, 0, 0],
              fontSize: 14,
              color: "rgba(255,255,255,1)",
            },
          },
        },
        yAxis: {
          name: "",
          triggerEvent: true,
          nameTextStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 16,
            padding: [0, 0, 10, -20],
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
        },
        // color: ["#e54035"],
        series: [
          {
            name: "数量",
            barMinHeight: 10,
            type: "pictorialBar",
            barCategoryGap: "60%",
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              normal: {
                // barBorderRadius: 5,
                // 渐变色
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#01EAED",
                  },
                  {
                    offset: 0.5,
                    color: "#02C4DD",
                  },
                  {
                    offset: 1,
                    color: "#029ED9",
                  },
                ]),
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#fff",
                  fontSize: 20,
                },
              },
            },
            data: data,
            z: 10,
          },
          {
            name: "hill",
            type: "bar",
            barWidth: "20%",
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              normal: {
                color: "rgba(11,47,68,.8)",
              },
            },
            data: maxArr,
            z: 9,
          },
        ],
      };
      this.chartColumn1.setOption(option);
    },
    initChart2() {
      this.chartColumn2 = this.$echarts.init(this.$refs.chartColumn2);
      const option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        grid: {
          left: "10%",
          top: "18%",
          right: "5%",
          bottom: "22%",
        },
        legend: {
          data: ["专家"],
          top: "4%",
          textStyle: {
            color: "#1FC3CE",
            fontSize: 14,
          },
        },
        xAxis: {
          // data: [ '商洛市', '渭南市', '咸阳市', '榆林市', '商洛市', '铜川市', '宝鸡市', '延安市', '汉中市', '安康市' ],
          data: this.data13.map((item) => item.name),
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: "#3d5269",
              width: 1,
            },
          },
          axisTick: {
            show: true, // 隐藏X轴刻度
            alignWithLabel: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", // X轴文字颜色
              fontSize: 14,
            },
            interval: 0,
            // rotate: 30
          },
        },
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "#3d5269",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff", // X轴文字颜色
                fontSize: 14,
              },
              interval: 0,
              // rotate: 30
            },
          },
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,
            },
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#396A87",
                width: 2,
              },
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", // 右侧Y轴文字显示
              textStyle: {
                color: "#396A87",
                fontSize: 14,
              },
            },
          },
        ],
        series: [
          {
            name: "专家",
            type: "bar",
            barWidth: 14,
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#0A89FF",
                  },
                  {
                    offset: 1,
                    color: "#14FAF6",
                  },
                ]),
              },
            },
            // data: [24, 45, 43, 35, 76, 154, 86, 42, 68, 97]
            data: this.data13.map((item) => item.value),
          },
        ],
      };
      this.chartColumn2.setOption(option);
    },
    initChart3() {
      this.chartColumn3 = this.$echarts.init(this.$refs.chartColumn3);
      var img =
        "";

      // var trafficWay = [{ name: '男', value: 20 }, { name: '女', value: 10 }]
      let mes = [];
      this.data16.forEach((item) => {
        mes.push({
          name: item["sex"],
          value: item["sex_cnt"],
        });
      });
      var trafficWay = mes;
      this.data16 = mes;
      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [85, 69],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  // var percent = 0
                  // var total = 0
                  // for (var i = 0; i < trafficWay.length; i++) {
                  //   total += trafficWay[i].value
                  // }
                  // percent = ((params.value / total) * 100).toFixed(0)
                  if (params.name !== "") {
                    return params.name + "性：" + params.value;
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 10,
                length2: 30,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      const option = {
        backgroundColor: "transparent",
        color: color,
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 108,
                height: 108,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        grid: {
          left: "8%",
          top: "18%",
          right: "5%",
          bottom: "22%",
        },
        tooltip: {
          show: false,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      this.chartColumn3.setOption(option);
    },
    initChart4() {
      this.chartColumn4 = this.$echarts.init(this.$refs.chartColumn4);
      const option = {
        backgroundColor: "transparent",
        grid: [
          {
            left: "12%",
            top: "8%",
            right: "5%",
            bottom: "22%",
          },
          {
            left: "95%",
            top: "8%",
            right: "0%",
            bottom: "22%",
          },
        ],
        xAxis: [
          {
            max: "dataMax",
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                color: "#10899A",
              },
            },
            axisTick: {
              show: false,
              inside: true,
              lineStyle: {
                color: "#10899A",
                fontSize: 14,
                fontFamily: "PingFangSC",
                fontWeight: 300,
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              formatter: (params) => {
                return "{marginTop|" + params + "}";
              },
              rich: {
                marginTop: {
                  padding: [0, 0, 0, 0],
                  color: "#fff",
                  fontSize: 14,
                  fontFamily: "PingFangSC",
                  fontWeight: 300,
                },
              },
            },
          },
          {
            gridIndex: 1,
            show: true,
            offset: 13,
            axisLine: {
              lineStyle: {
                color: "#10899A",
              },
            },
          },
        ],
        yAxis: [
          {
            name: "",
            // data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
            data: this.data17.map((item) => item.name),
            axisLabel: {
              show: false,
            },
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,
              fontFamily: "PingFangSC",
              fontWeight: 300,
              padding: [0, 0, 8, 0],
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#10899A",
              },
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: "#10899A",
                fontSize: 14,
                fontFamily: "PingFangSC",
                fontWeight: 300,
              },
            },
          },
          {
            gridIndex: 1,
            // data: ['张三', '李四', '小刘', '瑶瑶', '梦溪'],
            data: this.data17.map((item) => item.name),
            position: "left",
            nameTextStyle: {
              color: "#10899A",
              padding: [0, 0, 0, 8],
              fontSize: 14,
              fontFamily: "PingFangSC",
              fontWeight: 300,
            },
            axisLabel: {
              formatter: (params) => {
                return "{marginTop|" + params + "}";
              },
              rich: {
                marginTop: {
                  padding: [0, 0, 0, 0],
                  color: "#f3f2f8",
                  fontSize: 14,
                  fontFamily: "PingFangSC",
                  fontWeight: 300,
                },
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#10899A",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "订单数量",
            type: "bar",
            itemStyle: {
              barBorderRadius: 0,
              color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#FFB742",
                },
                {
                  offset: 1,
                  color: "rgba(255,183,66,.3) ",
                },
              ]),
            },
            barWidth: 20,
            // data: [482, 378, 446, 518, 238, 358, 312, 378, 220, 452, 302, 372]
            data: this.data17.map((item) => item.value),
          },
        ],
      };
      this.chartColumn4.setOption(option);
    },
    initChart5() {
      this.chartColumn5 = this.$echarts.init(this.$refs.chartColumn5);
      var color = [
        "#0CD2E6",
        "#3751E6",
        "#FFC722",
        "#886EFF",
        "#008DEC",
        "#114C90",
        "#00BFA5",
      ];

      var title = "";
      var legend = ["医生", "医师", "主治医生", "副主任医生", "护士", "其他"];

      // var seriesData = [ { name: '医生', value: 30 }, { name: '医师', value: 10 }, { name: '主治医生', value: 15 }, { name: '副主任医生', value: 23 }, { name: '护士', value: 10 }, { name: '其他', value: 12 } ]
      let mes = [];
      this.data18.forEach((item) => {
        mes.push({
          name: item.post,
          value: item.post_cnt,
          ratio: item.ratio,
        });
      });
      var seriesData = mes;
      this.data18 = mes;
      var option = {
        backgroundColor: "transparent",
        color: color,
        title: {
          top: 20,
          text: title,
          textStyle: {
            fontSize: 20,
            color: "#DDEEFF",
          },
        },
        grid: {
          top: "15%",
          left: 0,
          right: "1%",
          bottom: 5,
          containLabel: true,
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: 10,
          textStyle: {
            align: "left",
            verticalAlign: "middle",
            rich: {
              name: {
                color: "rgba(255,255,255,0.5)",
                fontSize: 10,
              },
              value: {
                color: "rgba(255,255,255,0.5)",
                fontSize: 10,
              },
              rate: {
                color: "rgba(255,255,255,0.9)",
                fontSize: 10,
              },
            },
          },
          data: legend,
          formatter: (name) => {
            if (seriesData.length) {
              const item = seriesData.filter((item) => item.name === name)[0];
              return `{name|${name}：}{value| ${item.value}} {rate| ${item.ratio}%}`;
            }
          },
        },
        series: [
          {
            name: "需求类型占比",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["45%", "65%"],
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{value|{c}}\n{label|{b}}",
                rich: {
                  value: {
                    padding: 5,
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: 32,
                  },
                  label: {
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: 16,
                  },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "12",
                },
              },
            },
            labelLine: {
              show: false,
              length: 0,
              length2: 0,
            },
            data: seriesData,
          },
        ],
      };
      const myChart = this.chartColumn5;
      myChart.setOption(option);

      getDefaultSelected(myChart);

      function getDefaultSelected(myChart) {
        let index = 0;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
        myChart.on("mouseover", (e) => {
          if (e.dataIndex !== index) {
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index,
            });
          }
        });
        myChart.on("mouseout", (e) => {
          index = e.dataIndex;
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        });
      }
    },
    initChart6() {
      this.chartColumn6 = this.$echarts.init(this.$refs.chartColumn6);
      const option = {
        backgroundColor: "transparent",
        title: {
          text: "",
          left: "12%",
          top: "13%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        legend: {
          show: true,
          icon: "circle",
          top: "13%",
          itemWidth: 6,
          itemHeight: 6,
          itemGap: 25,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        grid: {
          top: "15%",
          left: "8%",
          right: "8%",
          bottom: "18%",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            type: "category",
            // data: ['瑶瑶', '梦溪', '小刘', '安安', '小小', '时间', '苏落'],
            data: this.data15.map((item) => item.name),
            axisLine: {
              lineStyle: {
                color: "#1EF0D7",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#fff",
              },
              margin: 15,
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#ddd",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "回答问题数",
            type: "line",
            // data: [5, 12, 11, 4, 25, 16, 1],
            data: this.data15.map((item) => item.value),
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              color: "#1EF0D7",
            },
            itemStyle: {
              normal: {
                color: "#1EF0D7",
                borderColor: "#1EF0D7",
              },
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#1EF0D7",
                },
                {
                  offset: 1,
                  color: "rgba(30,240,215,.3)",
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9E87FF",
                    },
                    {
                      offset: 0.4,
                      color: "#9E87FF",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "#9E87FF",
                borderWidth: 2,
              },
            },
          },
        ],
      };
      this.chartColumn6.setOption(option);
    },
  },
};
</script>

<style scoped>
@import "../../../assets/scss/pages/data.scss";

.text-main {
  color: #00d8ff;
}

.height-3 {
  height: 32.6%;
}

.main_container {
  height: 100%;
}

.el-col {
  height: 100%;
}

.center-box {
  margin-left: 10px;
  margin-right: 10px;
  width: calc(100% - 20px);
}

.content-box1 {
  background: url("../../../assets/img/bigData/left-bg.png");
  background-size: 100% 100%;
}
</style>